<script setup>
import dayjs from 'dayjs';
const urlHome = useUrl();
const mpp = useCookie('mpp');
const pend = ref(false);

// function changeSelectPeriod() {
// 	getNaryads()
// }

// const { data: periods } = await useFetch(`${urlHome.value}lab/period_date/`)

const { data: periods } = await useFetch(`${urlHome.value}lab/period_date_dj/`)

const narInputField = ref('')
const narInputDebounced = ref('')
const { data: uslNar, refresh: uslNarRefresh } = await useFetch(`${urlHome.value}lab/naryad_usl_doc_one/`, {
	immediate: false,
	watch: [narInputDebounced],
	query: {
		nkv: narInputDebounced,
	}
})

async function closeUsl() {
	const response = await $fetch(`${urlHome.value}lab/close_usl/`, {
		query: {
			mpp: mpp.value,
			nkv: narInputDebounced.value
		}
	})
	if (response.ok) {
		getNaryads()
		uslNarRefresh()
	} else {
		alert("Ошибка закрытия наряда без лаборатории")
	}
}


watchDebounced(
	narInputField,
	() => {
		narInputField.value = narInputField.value.replace('а', 'A').replace('А', 'A').toUpperCase();
		narInputDebounced.value = narInputField.value;
	},
	{ debounce: 500, maxWait: 1000 },
)

const selectPeriodID = ref(0);
const pdzr_pl = ref([])
const dzr_pl = ref([])
const pdzr_lg = ref([])
const dzr_lg = ref([])

const selectPeriod = computed(() => periods.value.find((element) => element.id == selectPeriodID.value))

const sumLgot = computed(() => dzr_lg.value.reduce((sum, value) => sum + Number(value.stu), 0).toLocaleString())
const sumPredLgot = computed(() => pdzr_lg.value.reduce((sum, value) => sum + Number(value.stu), 0).toLocaleString())
const sumPredPd = computed(() => pdzr_pl.value.reduce((sum, value) => sum + Number(value.stu), 0).toLocaleString())
const sumPd = computed(() => dzr_pl.value.reduce((sum, value) => sum + Number(value.stu), 0).toLocaleString())

async function getNaryads() {
	pend.value = true
	let formData = new FormData();
	formData.append('mpp', mpp.value)
	formData.append('dn_lg', dayjs(selectPeriod.value.dn_lg).format('YYYY-MM-DD'))
	formData.append('dk_lg', dayjs(selectPeriod.value.dk_lg).format('YYYY-MM-DD'))
	formData.append('dn_pl', dayjs(selectPeriod.value.dn_pl).format('YYYY-MM-DD'))
	formData.append('dk_pl', dayjs(selectPeriod.value.dk_pl).format('YYYY-MM-DD'))

	const response = await $fetch(`${urlHome.value}lab/nar_list_by_period/`, {
		method: 'POST',
		body: formData,
	})

	if (response.ok) {
		pdzr_pl.value = response.pdzr_pl
		dzr_pl.value = response.dzr_pl
		pdzr_lg.value = response.pdzr_lg
		dzr_lg.value = response.dzr_lg
	}
	pend.value = false
}

const columns_pdzr = [{
	key: 'nkv',
	label: 'Наряд'
}, {
	key: 'fio',
	label: 'Пациент'
}, {
	key: 'dou',
	label: 'Дата наряда'
}, {
	key: 'stu',
	label: 'Сумма'
}, {
	key: 'pdzr',
	label: 'Дата закрытия'
}, {
	key: 'lpu__name_lpu',
	label: 'Поликлиника'
}]

const columns_dzr = [{
	key: 'nkv',
	label: 'Наряд'
}, {
	key: 'fio',
	label: 'Пациент'
}, {
	key: 'dou',
	label: 'Дата наряда'
}, {
	key: 'stu',
	label: 'Сумма'
}, {
	key: 'dzr',
	label: 'Дата закрытия'
}, {
	key: 'lpu__name_lpu',
	label: 'Поликлиника'
}]

</script>
<template>
	<div>
		<div class="font-bold flex flex-row">
			<div class="flex flex-col p-2 justify-items-center">
				<div class="text-xl">Подтвержденные наряды</div>
				<div class="px-10">Льготные: {{ sumLgot.toLocaleString() }} руб.</div>
				<div class="px-10">Платные: {{ sumPd.toLocaleString() }} руб.</div>
			</div>
			<div class="flex flex-col p-2">
				<div class="text-xl">Предварительно закрытые наряды:</div>
				<div class="px-10">Льготные: {{ sumPredLgot.toLocaleString() }} руб.</div>
				<div class="px-10">Платные: {{ sumPredPd.toLocaleString() }} руб.</div>
			</div>
		</div>
		Сумма предварительно закрытых льготных нарядов:

		Сумма льготных нарядов:

		<div v-if="pend">
			<LoadFetchAnimation></LoadFetchAnimation>
		</div>
		<div
			class="px-2 py-2 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 sm:flex md:flex lg:flex xl:flex 2xl:flex sm:gap-4">
			Выбрать период формирования отчета:
			<USelect color="green" v-model="selectPeriodID" @change="getNaryads" :options="periods"
				option-attribute="nmonth" value-attribute="id" />
		</div>
		<div
			class="px-2 py-2 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 sm:flex md:flex lg:flex xl:flex 2xl:flex sm:gap-4">
			Введите номер наряда:
			<UInput v-model="narInputField" color="primary" variant="outline" placeholder="Наряд без лаборатории..." />
			<UButton :disabled="!uslNar?.ok || uslNar?.doc_mpp !== mpp || uslNar?.laboratory" color="primary"
				@click="closeUsl">Закрыть
				наряд</UButton>
		</div>
		<div v-if="!(uslNar?.doc_mpp === mpp) && uslNar?.ok" class="px-2 font-bold">
			Внимание! Этот наряд выписан другим врачом.
		</div>
		<div v-if="uslNar?.laboratory && !(!(uslNar?.doc_mpp === mpp) && uslNar?.ok)" class="px-2 font-bold">
			Наряд имеет отметку лаборатории, передайте его на распределение в лабораторию, либо сделайте заявку что бы
			установить статус как наряд без лаборатории.
		</div>
		<div v-if="uslNar" class="px-2 font-bold">
			{{ uslNar?.message }}
		</div>
		<div v-if="dzr_lg.length > 0">
			<div>
				<h1
					class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-3xl lg:text-3xl dark:text-white">
					Закрытые льготные наряды</h1>
			</div>
			<UTable :rows="dzr_lg" :columns="columns_dzr">
				<template #dou-data="{ row }">
					<span>{{ dayjs(row.dou).format('DD.MM.YYYY') }}</span>
				</template>
				<template #stu-data="{ row }">
					<span>{{ row.stu.toLocaleString() }} руб.</span>
				</template>
				<template #dzr-data="{ row }">
					<span>{{ dayjs(row.dzr).format('DD.MM.YYYY') }}</span>
				</template>
			</UTable>
		</div>
		<div v-if="pdzr_lg.length > 0">
			<div>
				<h1
					class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-3xl lg:text-3xl dark:text-white">
					Ожидающие проверки льготные наряды</h1>

			</div>
			<UTable :rows="pdzr_lg" :columns="columns_pdzr">
				<template #dou-data="{ row }">
					<span>{{ dayjs(row.dou).format('DD.MM.YYYY') }}</span>
				</template>
				<template #stu-data="{ row }">
					<span>{{ row.stu.toLocaleString() }} руб.</span>
				</template>
				<template #dzr-data="{ row }">
					<span>{{ dayjs(row.pdzr).format('DD.MM.YYYY') }}</span>
				</template>
			</UTable>
		</div>
		<div v-if="pdzr_pl.length > 0">
			<div>
				<h1
					class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-3xl lg:text-3xl dark:text-white">
					Ожидающие проверки платные наряды</h1>
			</div>
			<UTable :rows="pdzr_pl" :columns="columns_pdzr">
				<template #dou-data="{ row }">
					<span>{{ dayjs(row.dou).format('DD.MM.YYYY') }}</span>
				</template>
				<template #stu-data="{ row }">
					<span>{{ row.stu.toLocaleString() }} руб.</span>
				</template>
				<template #dzr-data="{ row }">
					<span>{{ dayjs(row.pdzr).format('DD.MM.YYYY') }}</span>
				</template>
			</UTable>
		</div>
		<div v-if="dzr_pl.length > 0">
			<div>
				<h1
					class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-3xl lg:text-3xl dark:text-white">
					Закрытые платные наряды</h1>
			</div>
			<UTable :rows="dzr_pl" :columns="columns_dzr">
				<template #dou-data="{ row }">
					<span>{{ dayjs(row.dou).format('DD.MM.YYYY') }}</span>
				</template>
				<template #stu-data="{ row }">
					<span>{{ row.stu.toLocaleString() }} руб.</span>
				</template>
				<template #dzr-data="{ row }">
					<span>{{ dayjs(row.dzr).format('DD.MM.YYYY') }}</span>
				</template>
			</UTable>
		</div>
	</div>
</template>